<template>
  <div class="content" style="padding: 20px;">
    <el-table
      :data="baseInfo.materials"
      stripe
      style="width: 100%"
      :header-cell-style="{
        background: '#F7F9FD',
        color: '#000',
        height: '48px',
        borderTop: '1px soild #E4E8F2'
      }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column type="index" label="序号" width="50px">
      </el-table-column>
      <el-table-column prop="materialName" label="物资名称">
      </el-table-column>
      <el-table-column prop="materialNum" label="数量">
      </el-table-column>
      <el-table-column prop="materialSpec" label="规格型号">
      </el-table-column>
      <el-table-column prop="materialImgs" label="物资图片">
        <template #default="{ row }">
          <div class="img-box">
            <div
              class="img-item"
              v-for="(item, index) in row.materialImgs"
              :key="index"
            >
              <previewImg :files="item" type="epms" style="height:50px;"></previewImg>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from "vue";
import previewImg from "/@/components/previewImg/index.vue";

const props = defineProps({
  basicInfoData: {
    type: Object,
    default: () => {}
  }
});

let baseInfo = ref(null);

watch(
  () => props.basicInfoData,
  newVal => {
    if (newVal) {
      console.log('---val', newVal)
      baseInfo.value = newVal;
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.divider {
  margin-bottom: 10px;
  // border-left: 3px solid #409eff;
  text-indent: 8px;
}
.content {
  width: 100%;
  margin-bottom: 20px;
}

:deep .el-select {
  width: 100%;
}
:deep .el-date-editor {
  width: 100%;
}
</style>
